<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogTitle = ref('录入维修车辆');
const dialogVisible = ref(false);
const arrLicense=ref([]);
const hadLicense=()=>{
  console.log(addForm.value);
  axios.get(BASE_URL+'/v1/vehicle/select').then((response)=>{
    if (response.data.code=2000){
      console.log('车牌卡号',response.data.data.license);
      for (let i=0;i<response.data.data.length;i++){
        console.log('卡号',response.data.data[i]);
        arrLicense.value.push(response.data.data[i]);
      }
    }else {
      ElMessage.error(response.data.msg)
    }


  })
}
const addForm=ref({
  id:'',
  userId:'',
  username:'',
  vehicleId:'',
  item:'',
  addr:'',
  repairTime:'',
  fee:'',
  material:'',
  status:''
})
const AddRepairVehicle = (row) => {
  dialogVisible.value = true;
  dialogTitle.value = '录入维修车辆';
  addForm.value=row
  addForm.value.username=user.value.username;
}

const user=ref(getUser());

const array=ref([]);
const addArr=ref([]);
const maArr=ref([]);
onMounted(()=>{
  loadDictOptions(array,'repair_item');
  loadDictOptions(addArr,'repair_addr');
  loadDictOptions(maArr,'repair_material');
  hadLicense();
})
const repairArr = ref([]);
const searchVehicleForm=ref({
  license:'',
  username:'',
  status:''
})
const hadAddr=()=>{
  let data=qs.stringify(searchVehicleForm.value);
  console.log("数据",data)
  axios.get(BASE_URL+'/v1/repair/select?'+data).then((response)=>{
    if (response.data.code=2000){
      repairArr.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
const resetSearch=()=>{
  searchVehicleForm.value={
    license:'',
    username:'',
    status:''
  }
  hadAddr();
}
onMounted(() => {
  hadAddr();
})
const close=()=>{
  if (confirm(('你确定关闭本弹窗'))){
    dialogVisible.value = false;
  }else {
    dialogVisible.value = true;
  }
}
const saveRepairVehicle=()=>{
  addForm.value.username=user.value.username;
  addForm.value.userId=user.value.id;
  console.log('值值值',addForm.value);
  let data=qs.stringify(addForm.value);
  axios.post(BASE_URL+'/v1/repair/add',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('录入成功!');
      dialogVisible.value = false;
      addForm.value = {};
      hadAddr();
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
const vehicleLicenseFormatter=(row,column,cellValue,index)=>{
  if (!repairArr.value){
    return cellValue;
  }
  for (let item of repairArr.value){
    if (item.vehicleId==cellValue){
      cellValue=item.license;
    }
  }
  return cellValue;
}
const deleteVehicle=(id)=>{
  console.log("航地",id);
  if (confirm('您确认要删除该记录吗?')){
    axios.post(BASE_URL+'/v1/repair/delete/'+id).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('删除成功!');
        hadAddr();
      }else {
        ElMessage.error(response.data.msg)
      }
    })
  }

}
</script>

<template>
  <div style="height: 6vh;background-color: #fff;padding: 10px 20px">
    <span style="line-height: 60px;font-size: 20px;">车辆维修</span>
    <el-button style="float: right" type="primary" @click="AddRepairVehicle">录入维修车辆</el-button>
  </div>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width: 1000px;padding: 40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送修人">
            <el-input disabled :value="addForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修车辆">
            <el-select placeholder="请选择车牌号" v-model="addForm.vehicleId">
              <el-option v-for="item in arrLicense" :label="item.license" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修项目">
            <el-select placeholder="请选择" v-model="addForm.item">
              <el-option v-for="item in array" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修地点">
            <el-select placeholder="请选择" v-model="addForm.addr">
              <el-option v-for="item in addArr" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修材料">
            <el-select placeholder="请选择" v-model="addForm.material">
              <el-option v-for="item in maArr" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修费用">
            <el-input placeholder="请输入" v-model="addForm.fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修时间">
            <el-date-picker type="datetime" v-model="addForm.repairTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修状态" >
            <el-radio-group v-model="addForm.status">
              <el-radio label="维修中" value="1"></el-radio>
              <el-radio label="已完成" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @Click="saveRepairVehicle()">录入</el-button>
    </template>
  </el-dialog>
  <el-card style="margin: 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="维修车辆" style="width: 270px;">
        <el-input placeholder="请输入车牌号" v-model="searchVehicleForm.license"></el-input>
      </el-form-item>
      <el-form-item label="送修人员" style="width: 270px;">
        <el-input placeholder="请输入送修人姓名" v-model="searchVehicleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="维修状态" style="width: 270px;">
        <el-select placeholder="请选择维修状态" v-model="searchVehicleForm.status" @change="hadAddr">
          <el-option label="维修中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="hadAddr">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 20px">
    <el-table :data="repairArr">
      <el-table-column label="编号" width="80" align="center" type="index"></el-table-column>
      <el-table-column label="维修车辆" align="center" prop="vehicleId" :formatter="vehicleLicenseFormatter"></el-table-column>
      <el-table-column label="维修项目" align="center" prop="item"></el-table-column>
      <el-table-column label="送修人员" align="center" prop="username"></el-table-column>
      <el-table-column label="维修地点" align="center" prop="addr"></el-table-column>
      <el-table-column label="维修时间" align="center" prop="repairTime"></el-table-column>
      <el-table-column label="维修费用" align="center" prop="fee"></el-table-column>
      <el-table-column label="维修材料" align="center" prop="material"></el-table-column>
      <el-table-column label="维修状态" align="center" prop="status"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="AddRepairVehicle(scope.row)">编辑</el-button>
          <el-button type="primary" link @click="deleteVehicle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>

</style>